<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>H5新增获取元素方式</title>
</head>
<body>
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div id="nav">
  <ul>
    <li>首页</li>
    <li>产品</li>
  </ul>
</div>
<script>
  // 1. getElementsByClassName 根据类名获得某些元素集合
  var boxs = document.getElementsByClassName('box')
  console.log(boxs)
  // 2. querySelector 返回指定选择器的第一个元素对象  切记 里面的选择器需要加符号 .box  #nav
  var firstBox = document.querySelector('.box')   // 找到的是第一个
  console.log(firstBox)
  var nav = document.querySelector('#nav')
  console.log(nav)
  var li = document.querySelector('li')
  console.log(li)
  // 3. querySelectorAll()返回指定选择器的所有元素对象集合
  var allBox = document.querySelectorAll('.box')
  console.log(allBox)
  var lis = document.querySelectorAll('li')
  console.log(lis)
</script>
</body>
</html>